<template>
	<div class="union">
		<cl-crud @load="onLoad">
			<template #slot-add-authorize="{scope}">
				<el-button
					size="mini"
					type="primary"
					@click="addAuthorize()"
					v-permission="$service.account.union.permission.add"
				>
					<i class="el-icon-plus"></i>添加授权
				</el-button>
			</template>

			<template #table-column-expireTime="{ scope }">
				<p class="expire-time">
					{{ scope.row.expireTime }}
					<i class="el-icon-refresh-right" @click="addAuthorize()"></i>
				</p>
			</template>

			<template #slot-row-decide="{ scope }">
				<count-downbtn
					:ref="'countDownbtn' + scope.row.id"
					:key="scope.row.id"
					@click="orderList(scope.row)"
				></count-downbtn>
			</template>
		</cl-crud>

		<!--采集订单历史弹窗-->
		<order-list ref="orderList" :item="orderItem" @startCountDown="startCountDown"></order-list>
		<!-- 绑定广告位弹窗 -->
		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import OrderList from './components/order-list';
import CountDownbtn from './components/countdownbtn';
export default {
	name: 'union',
	components: {
		OrderList,
		CountDownbtn
	},
	data() {
		return {
			orderItem: {},
			options: {
				union: [],
				staff: []
			}
		};
	},
	created() {
		// this.getUnionList();
		// this.getStaffList();
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.account.union)
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '授权账号',
							prop: 'account',
							align: 'center'
						},
						{
							label: '到期时间',
							prop: 'expireTime',
							align: 'center'
						},
						{
							label: '授权状态',
							prop: 'status',
							align: 'center',
							dict: [
								{
									label: '成功',
									value: 1
								},
								{
									label: '失败',
									value: 0
								}
							]
						}
					],

					props: {
						'default-sort': {
							prop: 'expireTime',
							order: 'descending'
						}
					},

					op: {
						props: {
							width: '200px'
						},
						layout: ['slot-row-decide', 'delete']
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-add-authorize'],
					['data-table'],
					['flex1', 'pagination']
				])
				.set('tips', {
					delete: {
						confirm:
							'删除后，微信号管理对应的联盟信息也将被删除。如果你想更新联盟信息，请点击到期时间旁边的更新按钮，或者点击添加授权按钮。是否删除联盟号？'
					}
				})
				.done();

			app.refresh();
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		// 获取联盟账号
		getUnionList() {
			this.$service.account.union.list().then(res => {
				this.options.union = res;
			});
		},
		// 获取运营人列表
		getStaffList() {
			this.$service.account.extension.staffList().then(res => {
				this.options.staff = res;
			});
		},
		// 添加授权
		addAuthorize() {
			this.$service.account.union.getLink().then(() => {
				this.$confirm('请在新页面完成授权', '提示', {
					type: 'warning',
					confirmButtonText: '已完成',
					cancelButtonText: '关闭'
				}).then(() => {
					this.refresh();
				});
			});
		},
		// 采集历史订单
		orderList(item) {
			this.orderItem = item;
			this.$refs.orderList.open();
		},
		// 开始采集
		startCountDown() {
			if (this.$refs[`countDownbtn${this.orderItem.id}`]) {
				this.$refs[`countDownbtn${this.orderItem.id}`].start();
			}
		}
	}
};
</script>

<style lang="stylus" scoped>
.union {
	.expire-time {
		flexBox(center,center)
		line-height 16px
		i {
			margin-left 10px
			cursor pointer
			font-size 18px!important
			color #065FFE
		}
	}
	.order-list {
		margin-right 20px
		color $main-color
		cursor pointer
	}
}
</style>
